<template>
  <div class="contain">
    <van-cell-group>
      <van-field center v-model="userName" label="用户名" placeholder="请输入" />
        <van-field
        clearable
        center
        type="number"
        v-model="checkWord"
        label="验证码"
        placeholder="请输入"
      >
        <template #button>
            <van-button :disabled="timing" @click="getWord" blocksize="small" type="info">{{timing?'已发送':'发送验证码'}} {{countdown}}</van-button>
        </template>
        </van-field>
    </van-cell-group>
    <van-row gutter="20" class="van-row" type="flex" justify="center">
      <van-col span="10">
        <van-button text="确定" size="large" type="info" @click="check()"></van-button>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import { Toast } from "vant";
import helper from "../../service/helper.js";
import parameter from "../../service/state.js";
export default {
  data() {
    return {
      userName: "",
      checkWord: "",
      countdown: "",
      timing:false
    };
  },
  components: {},
  methods: {
    getWord(){
      var that = this
      if(that.timing) return
      that.timing = true
      that.countdown = 60
        var timer = setInterval(function () {
        that.countdown--
        if(that.countdown<=0){
            clearInterval(timer)
            that.countdown = ""
            that.timing = false
          }
      }, 1000)
    Toast('验证码已发送')
    },
    check(){
        var that = this
        var checkInfo={
            userName:that.userName,
            checkWord:that.checkWord
        }
        if(!checkInfo.userName){
            Toast('请输入用户名')
        }else if(!checkInfo.checkWord){
            Toast('请输入验证码')
        }else if(checkInfo.checkWord==111111){
            this.jump('/modify')
        }else{
            Toast('验证码错误')
        }
    },
    jump(url, data) {
      if (url && url == "-1") {
        this.$router.back(-1);
      } else {
        this.$router.push({ path: url, query: data });
      }
    },
  },
  watch: {},
  mounted() {},
};
</script>
<style scoped lang="less">
.contain{
  max-width: 400px;
  margin: 10px auto;
  border: 1px solid black;
}
.van-row {
  margin: 20px 0;
}
</style>